<template>
  <h3>模板指令二：v-bind指令</h3>
  <!-- 
     v-bind:
     1. 绑定 HTML 属性
     2. 绑定动态类和样式
     3. 绑定组件的 Props

     注："v-bind: "可简写为"："
      -->
  <p>1. 绑定 HTML 属性</p>
  <a :href="url">点击跳转百度链接</a>
  <hr />

  <p>2. 绑定动态类和样式</p>
  <div :class="classObject" :style="styleObject">Content</div>
  <hr />

  <p>3. 绑定组件的 Props</p>
  <!-- <my-component :some-prop="dynamicValue"></my-component> -->
</template>

<script lang="ts">
export default {
  name: 'Study2StuDemo2'
}
</script>

<script setup lang='ts'>
const url = 'https://www.baidu.com'
const isActive = true
const classObject = {
  active: !isActive,
  'text-success': !isActive
}
const styleObject = {
  color: 'blue',
  fontSize: '18px'
}
// const dynamicValue = 'some value'
</script>

<style scoped>
p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}

a {
  font-size: 12px;
  color: skyblue;
}
</style>